<template>
  <div class="header">
    <div class="content-wrapper">
      <div class="avatar">
        <img :src="sellers.avatar" class="avatarimg">
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{sellers.name}}</span>
        </div>
        <div class="description">
          {{sellers.description}}/{{sellers.deliveryTime}}分钟送达
        </div>
        <div v-if="sellers.supports" class="support">
          <span class="icon" :class="classMap[sellers.supports[0].type]"></span>
          <span class="text">{{sellers.supports[0].description}}</span>
        </div>
        <div v-if="sellers.supports" class="support-count">
          <span class="count">{{sellers.supports.length}}个</span>
          <i class="icon-arrow">→</i>
        </div>
      </div>
    </div>
    <div class="bulletin-wrapper">
      <span class="bulletin-title"></span><span class="bulletin-text">{{sellers.bulletin}}</span>
      <i class="icon-arrow">→</i>
    </div>
    <div class="background">
      <img :src="sellers.avatar" width="100%" height="100%">
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    sellers: Object
  },
  created () {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/styles/maxin.styl'
  .header
    color #fff
    position relative
    background rgba(7,17,27,0.5)
    .content-wrapper
      position relative
      padding .48rem .24rem .36rem .48rem
      font-size 0
      .avatar
        vertical-align top
        display inline-block
        .avatarimg
            width 1.28rem
            height 1.28rem
            border-radius .08rem
      .content
        display inline-block
        vertical-align top
        margin-left .32rem
        .title
          margin .04rem 0 .16rem 0
          .brand
            display inline-block
            vertical-align top
            width .6rem
            height .36rem
            bg-image('brand')
            background-size .6rem .36rem
            background-repeat no-repeat
          .name
            margin-left .12rem
            font-size .32rem
            line-height .36rem
            font-weight bold
        .description
          margin-bottom  .2rem
          line-height .24rem
          font-size .24rem
        .support
          .icon
            display inline-block
            vertical-align top
            width .24rem
            height .24rem
            margin-right .08rem
            background-size .24rem .24rem
            background-repeat no-repeat
            &.decrease
              bg-image('decrease_1')
            &.discount
              bg-image('discount_1')
            &.guarantee
              bg-image('guarantee_1')
            &.invoice
              bg-image('invoice_1')
            &.special
              bg-image('special_1')
          .text
            line-height .24rem
            font-size .24rem
      .support-count
        position absolute
        right .24rem
        bottom .28rem
        padding 0 .16rem
        height .48rem
        line-height .48rem
        border-radius .28rem
        background rgba(0,0,0,0.2)
        text-align center
        .count
        vertical-align top
          font-size .2rem
        .icon-arrow
          margin-left .04rem
          line-height .48rem
          font-size .2rem
    .bulletin-wrapper
      position relative
      height .56rem
      line-height .56rem
      padding 0 .44rem 0 .24rem
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
      background rgba(7,17,27,0.2)
      // font-size 0
      .bulletin-title
        display inline-block
        vertical-align top
        margin-top .14rem
        width .44rem
        height .24rem
        bg-image('bulletin')
        background-size .44rem .24rem
        background-repeat no-repeat
      .bulletin-text
        vertical-align top
        margin 0 .08rem
        font-size .2rem
      .icon-arrow
        position absolute
        font-size .2rem
        right .24rem
        top .16rem
    .background
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      z-index -1
      filter blur(.1rem)
</style>
